<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>websocket 客户端</title>

  <script type="text/javascript">
    // var ws1 = new WebSocket("ws://localhost:8080/websocket/test/documents/22/52");
    // var ws2 = new WebSocket("ws://localhost:8080/websocket/test/documents/22/53");
    var token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ0ZXN0ODg4QHRlc3QuY29tIiwiaWF0IjoxNjM4NjkzNDkzLCJleHAiOjE2Mzg2OTcwOTN9.GHhyP300QUgV6RKmSHy6t5wuaBy8EOWur9ZUQ9f9Qmw";
    function WebSocketTestA()
    {
        // 创建一个 websocket
        var ws1 = new WebSocket("ws://localhost:8080/websocket/documents/80", [token]);

        ws1.onopen = function()
        {
          // Web Socket 已连接上，使用 send() 方法发送数据
          var jsonData = {
            revision: 509,
            changeList: [
              /*{
                opName: 'insert',
                opValue: '123456789'
              },*/
              {
                opName: 'insert',
                opValue: '\n'
              }/*,
              {
                opName: 'insert',
                opValue: '123456789'
              }*/
            ]
          }
          var str = JSON.stringify(jsonData);
          alert(str);
          ws1.send(str);
          // alert("数据发送中...");
        };

        ws1.onmessage = function (evt)
        {
          var received_msg = evt.data;
          alert("数据已接收...\n" + received_msg);
        };

        ws1.onclose = function()
        {
          // 关闭 websocket
          alert("连接已关闭...");
        };
    }

    function WebSocketTestB()
    {
        // 创建一个 websocket
        var ws2 = new WebSocket("ws://localhost:8080/websocket/documents/80", token);

        ws2.onopen = function()
        {
          // Web Socket 已连接上，使用 send() 方法发送数据
          var jsonData = {
            revision: 2,
            changeList: [
              {
                opName: 'retain',
                opValue: null,
                opLength: 20
              },
              {
                opName: 'delete',
                opValue: null,
                opLength: 5
              }
            ]
          }
          var str = JSON.stringify(jsonData);
          alert(str);
          ws2.send(str);
        };

        ws2.onmessage = function (evt)
        {
          var received_msg = evt.data;
          alert("数据已接收...\n" + received_msg);
        };

        ws2.onclose = function()
        {
          // 关闭 websocket
          alert("连接已关闭...");
        };
    }

    function WebSocketTestC()
    {
        // 创建一个 websocket
        ;

        ws.onopen = function()
        {
          // Web Socket 已连接上，使用 send() 方法发送数据
          var jsonData = {
            revision: 2,
            changeList: [
              {
                opName: 'retain',
                opLength: 4
              },
              {
                opName: 'delete',
                opLength: 3
              },
              {
                opName: 'insert',
                opValue: 'ccc'
              }
            ]
          }
          var str = JSON.stringify(jsonData);
          alert(str);
          ws.send(str);
        };

        ws.onmessage = function (evt)
        {
          var received_msg = evt.data;
          alert("数据已接收...\n" + received_msg);
        };

        ws.onclose = function()
        {
          // 关闭 websocket
          alert("连接已关闭...");
        };
    }
  </script>

</head>
<body>

<div id="client1">
  <a href="javascript:WebSocketTestA()">运行 WebSocket 1</a>
</div>

<div id="client2">
  <a href="javascript:WebSocketTestB()">运行 WebSocket 2</a>
</div>

<div id="client3">
  <a href="javascript:WebSocketTestC()">运行 WebSocket 3</a>
</div>

</body>
</html>